<template>
  <div
    id="echart_con"
    :class="'histogram histogram' + randomIndex"
    :style="
      'width:' +
      width +
      ';' +
      'height: ' +
      height +
      'px;' +
      (borderProps ? borderProps + ';' : 'border: 1px solid #333;') +
      (borderColor ? 'border-color:' + borderColor + ';' : '') +
      'margin: 0 auto;' +
      (hiddenBorder ? 'border-width: 0;' : '')
    "
    style="width: 500px"
    :key="chart_key"
  ></div>
</template>

<script>
// 调用
// import ring_chart from "@/components/LcM/echarts/ring_chart";

// 'ring-chart': ring_chart

// <ring-chart
//     width="50%"
//     height="300"
//     borderColor="#f44"
// />

// <ring-chart
//     width="50%"
//     height="300"
//     borderColor="#f44"
//     dataOptionFull="curOption"
// />

export default {
  props: {
    width: {
      type: [String],
      default: "50%",
    },
    height: {
      type: [String],
      default: "300",
    },
    borderProps: {
      type: [String],
    },
    borderColor: {
      type: [String],
    },
    dataOptionFull: {
      type: [Object],
    },
    //标题属性
    yTitle: {
      type: [String],
    },
    //柱状图颜色
    itemColor: {
      type: [String],
      default: "#f44",
    },
    hiddenBorder: {
      type: [String, Boolean],
    },
  },
  mounted() {
    //格式化图表属性
    this.formatEchart();
    //数据请求

    /* 渲染图表 */

    //随机类名，用来区分图表
    this.randomIndex = (Math.random() * 1000).toFixed(0);
    let echartClassName = "histogram" + this.randomIndex;
    //初始化
    let myChart = "";
    setTimeout(() => {
      myChart = this.$echarts.init(
        document.getElementsByClassName(echartClassName)[0]
      );
      myChart.setOption(this.option);
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    });
  },
  methods: {
    //格式化
    formatEchart() {
      const propsObj = this.$props;
      for (var itemKey in propsObj) {
        var itemVal = propsObj[itemKey];
        if (itemKey == "yTitle") {
          this.option.title.text = itemVal;
        } else if (itemKey == "itemColor") {
          this.option.color = [itemVal];
        }
      }
    },
  },
  data() {
    return {
      //用来区分多个图表
      randomIndex: "1",
      //key更新
      chart_key: 100,
      //柱状图配置
      option: {
        title: {},
        tooltip: {
          //提示框，可以在全局也可以在
          trigger: "item", //提示框的样式
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          color: "#000", //提示框的背景色
          textStyle: {
            //提示的字体样式
            color: "black",
          },
        },
        legend: {
          //图例
          orient: "vertical", //图例的布局，竖直    horizontal为水平
          x: "right", //图例显示在右边
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
          textStyle: {
            //图例文字的样式
            color: "#333", //文字颜色
            fontSize: 12, //文字大小
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie", //环形图的type和饼图相同
            radius: ["50%", "70%"], //饼图的半径，第一个为内半径，第二个为外半径
            avoidLabelOverlap: false,
            color: [ "#69c0ff", "#4CD0DD",],
            label: {
              normal: {
                //正常的样式
                show: true,
                position: "left",
              },
              emphasis: {
                //选中时候的样式
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                },
              },
            }, //提示文字
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              { value: 335, name: "男" },
              { value: 310, name: "女" },
            ],
          },
        ],
      },
    };
    //data end
  },
};
</script>

<style lang="scss" scoped>
.histogram {
  padding: 20px;
  padding-bottom: 0;
  border-radius: 4px;
}
</style>